import React from "react"
import { createRef } from "react"

//受控
class Counter extends React.Component {
    state = {
        message:'this is message'
    }
    updateInput=(e)=>{
       this.setState({
        message:e.target.value
       })
    }
    render () {
        return (
            <input type='text' value={this.state.message} onChange={this.updateInput}/>
        )
    }
}
//非受控
class Counter2 extends React.Component {
    msgRef = createRef()
    getValue=()=>{
      console.log(this.msgRef.current.value)
    }
    render () {
        return (
            <>
            <input type='text' ref={this.msgRef}/>
            <button onClick={this.getValue}>点击获取输入框的值</button>
            </>
        )
    }
}
function App(){
    return(
      <div>
        <Counter></Counter>
        <Counter2></Counter2>
      </div>
    )
}

export default App